<!DOCTYPE html>
<!-- saved from url=(0097)http://pyq001.1y0g.com/view3?uid=oJ642szr4G-SKgO5KFnUdr_NfWIU&from=singlemessage&isappinstalled=0 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的朋友圈</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/css/app.css">
    <script src="/js/jquery/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/friendComment/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/friendComment/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/friendComment/js/bootstrap-paginator.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/friendComment/css/modal.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>




    <style type="text/css">
        p{
            margin:0;padding:0;
        }

        * {
            cursor: pointer;
        }

        .weui_mask_transition {
            display: none;
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0);
            -webkit-transition: background .3s;
            transition: background .3s;
        }

        .weui_fade_toggle {
            background: rgba(0, 0, 0, 0.6);
        }

        .weui_actionsheet {
            position: fixed;
            left: 0;
            bottom: 0;
            -webkit-transform: translate(0, 100%);
            -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 2;
            width: 100%;
            background-color: #EFEFF4;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }

        .weui_actionsheet_toggle {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .weui_actionsheet_menu {
            background-color: #FFFFFF;
        }

        .weui_actionsheet_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

        .weui_actionsheet_cell:first-child:before {
            display: none;
        }

        .weui_actionsheet_cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 18px;
        }

        .weui_actionsheet_cell.title {
            color: #999;
        }

        .weui_actionsheet_action {
            margin-top: 6px;
            background-color: #FFFFFF;
        }

    </style>

    <script>

        var comment="";
        var str = "";


        $(function () {
            //获取当前用户id
            var user = sessionStorage.getItem("user");
            user = JSON.parse(user);
            var id = user.id;

            //根据用户id查询朋友圈
            $.get("/friends/" + id, function (data) {
                console.log(data);
                $('#list').renderValues(data,{
                    getComment:function(item,value1){
                        console.log(value1);
                        comment = "";
                        str = "";
                        if(value1.length>0){
                            con(value1);

                            $(item).html(comment);
                            console.log(comment);
                        }

                    }
                });

                //回复内容
                $('.friendcomment').unbind("click");
                $('.friendcomment').click(function () {
                    $('#submitForm input').val("");
                    $('#submitForm textarea[name=content]').attr("placeholder","在这里输入你想说的话吧");
                    var json = $(this).data("comment");
                    var parentId = $(this).attr("parentId");
                    var friendId = $(this).closest(".cmt-list").attr("friendId");
                    $('#myModal [name="friend.id"]').val(friendId);
                    $('#myModal [name="parent.id"]').val(parentId);
                    $('#myModal [name="content"]').val("");
                    console.log($('#myModal [name="content"]').get(0));
                    $('#myModal [name="content"]').attr("placeholder","回复："+json.nickName);
                    $('#myModal').modal("show");
                });

                $('.commentBtn').unbind("click");
                $('.commentBtn').click(function () {
                    $('#submitForm input').val("");
                    $('#myModal [name="content"]').val("");
                    $('#submitForm textarea[name=content]').attr("placeholder","在这里输入你想说的话吧");
                    var friendId = $(this).attr("friendId");
                    $('#myModal [name="friend.id"]').val(friendId);
                    $('#myModal').modal("show");
                })

                //点击人物名字
                $('.user').click(function () {
                    var json = $(this).data("comment");
                    window.location.href="/userProfiles.html?id="+json.id;
                });


                //点击人物名字
                $('.img').click(function () {
                    var json = $(this).data("comment");
                    window.location.href="/userProfiles.html?id="+id;
                });

                //朋友圈点赞
                $('.like').click(function () {
                    var $like = $(this);
                    console.log($like.get(0));
                    console.log($like.find("span:first").get(0));
                    var friendId = $(this).siblings('.cmt-list').attr("friendid");
                    if($like.find(".heartImg").hasClass("fa-heart-o")){
                        //点赞
                        $.ajax({
                            url:"/friends/fabulous/"+friendId,
                            type:"post",
                            success:function (data) {
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '点赞成功',
                                    autoClose: 1500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                });
                                $like.find(".fabulousNames").html(data.result);
                                $like.find(".heartImg").removeClass("fa-heart-o").addClass("fa-heart");
                            }
                        })
                    }else{
                        //取消点赞
                        $.ajax({
                            url:"/friends/disFabulous/"+friendId,
                            type:"post",
                            success:function (data) {
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '取消点赞',
                                    autoClose: 1500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                });
                                $like.find(".fabulousNames").html(data.result);
                                $like.find(".heartImg").removeClass("fa-heart").addClass("fa-heart-o");
                            }
                        })
                    }

                });
            })

            var con = function(item){

                if (item){
                    for (var i = 0;i<item.length;i++){
                        if (item[i].parent){
                            str+="&nbsp;&nbsp;&nbsp;";
                            comment+='<p>'+str+'<span class="user" class="data-name" data-comment=\''+item[i].user.commentJson+'\'>'+item[i].user.nickName+'</span>回复<span class="user" data-comment=\''+item[i].parent.commentJson+'\'>'+item[i].parent.nickName+'</span><span>：</span><span class="friendcomment" data-comment=\''+item[i].user.commentJson+'\' parentId=\''+item[i].id+'\'>'+item[i].content+'</span></p>';
                            if (item[i].sonFriendComments){
                                con(item[i].sonFriendComments);
                                str=str.substring(0,str.length-18);
                            }
                        }else{
                            comment+="<p><span class='user' data-comment='"+item[i].user.commentJson+"'>"+item[i].user.nickName+"</span>：<span class='friendcomment' data-comment='"+item[i].user.commentJson+"' parentId='"+item[i].id+"'>"+item[i].content+"</span></p>";
                            if (item[i].sonFriendComments){
                                con(item[i].sonFriendComments);
                            }
                        }
                    }
                }
            };

            $('.btn-submit').click(function () {
                var btn = $(this);
                    //评论
                    $('#submitForm').attr("action","/friendComments/friend");
                    $('#submitForm').ajaxSubmit(function (data) {
                        //window.location.reload();
                        comment = "";
                        str="";
                        con(data.result.friendComments);
                        $('div[friendId='+data.result.id+']').html(comment);

                        //回复内容
                        $('.friendcomment').unbind("click");
                        $('.friendcomment').click(function () {
                            $('#submitForm input').val("");
                            $('#submitForm textarea[name=content]').attr("placeholder","在这里输入你想说的话吧");
                            var json = $(this).data("comment");
                            var parentId = $(this).attr("parentId");
                            var friendId = $(this).closest(".cmt-list").attr("friendId");
                            $('#myModal [name="friend.id"]').val(friendId);
                            $('#myModal [name="parent.id"]').val(parentId);
                            console.log($('#myModal [name="content"]').get(0));
                            $('#myModal [name="content"]').val("");
                            $('#myModal [name="content"]').attr("placeholder","回复："+json.nickName);
                            $('#myModal').modal("show");
                        });

                        $('.commentBtn').unbind("click");
                        $('.commentBtn').click(function () {
                            $('#submitForm input').val("");
                            $('#myModal [name="content"]').val("");
                            $('#submitForm textarea[name=content]').attr("placeholder","在这里输入你想说的话吧");
                            var friendId = $(this).attr("friendId");
                            $('#myModal [name="friend.id"]').val(friendId);
                            $('#myModal').modal("show");
                        })

                        //点击人物名字
                        $('.user').click(function () {
                            var json = $(this).data("comment");
                            window.location.href="/userProfiles.html?id="+json.id;
                        });

                        $(".myModal").modal("hide");
                    })
            });


            //回显
            $("#user-name").html(user.nickName);
            $("#bg").attr("src", user.coverImgUrl);
            $("#avt").attr("src", user.headImgUrl);


        })

    </script>

</head>
<body>
<div class="nav-search">
    <a href="/mine/profiles.html">
        <span><i class="fa fa-angle-left fa-2x"></i></span>
        <span style="float: right;margin-right: 39%;margin-top: 9px;font-size: 20px;">我的朋友圈</span>
    </a>
</div>

<div style="margin:0 auto;display:none;">
    <img class="data-avt">
</div>
<header>
    <img id="bg">
    <p id="user-name" class="data-name"></p>
    <img id="avt" class="data-avt" src="/images/0.jpg">
</header>
<div id="main">
    <div id="list">
        <ul render-loop="list">
            <li>
                <div>
                    <div class="po-avt-wrap">
                        <img class="po-avt data-avt img" render-src="list.user.headImgUrl">
                    </div>
                    <div class="po-cmt">
                        <div class="po-hd">
                            <p class="po-name"><span class="data-name" render-html="list.user.nickName"></span>
                            </p>
                            <div class="post">
                                <p render-html="list.content"></p>
                                <p render-loop="list.imgArr">
                                    <img class="list-img" render-src="list.imgArr.self" style="height: 80px;">
                                </p>
                            </div>
                            <p class="time" render-html="list.createDate">刚刚</p><img class="c-icon commentBtn" src="/images/c.png" render-attr="friendId=list.id">
                            <script>
                                /*$('.commentBtn').click(function () {
                                    $('#submitForm input').val("");
                                    $('#submitForm textarea[name=content]').attr("placeholder","在这里输入你想说的话吧");
                                    var friendId = $(this).attr("friendId");
                                    $('#myModal [name="friend.id"]').val(friendId);
                                    $('#myModal').modal("show");
                                })*/
                            </script>
                        </div>
                        <div class="r"></div>
                        <div class="cmt-wrap">
                            <div class="like"><span render-attr="class=list.iconClass" aria-hidden="true"></span><span class="fabulousNames" render-html="list.fabulousName"></span></div>
                            <div class="cmt-list" render-attr="friendId=list.id" render-key="list.friendComments" render-fun="getComment">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<script>
</script>


<script>
    function gotoplay(scene) {
        var gourl = "/act/pengYouQuan/my.php?sv=" + scene;
        location.href = gourl;
    }

    function safetostring(str) {
        return String(str).replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'");
    }

    //$("#list").html($("#scene").html());

    setTimeout(function () {
        // $(".data-name").text(safetostring(nickname));
        //$(".data-avt").attr("src", headimgurl);
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    }, 0);

    $(window).resize(function () {
        var cw = $('.list-img').width();
        $('.list-img').css({'height': cw + 'px'});
    });


    $(document.body).show();


    function hideActionSheet(weuiActionsheet, mask) {
        weuiActionsheet.removeClass('weui_actionsheet_toggle');
        mask.removeClass('weui_fade_toggle');
        weuiActionsheet.on('transitionend', function () {
            mask.hide();
        }).on('webkitTransitionEnd', function () {
            mask.hide();
        })
    }

    function showActionSheet() {
        var mask = $('#mask');
        var weuiActionsheet = $('#weui_actionsheet');
        weuiActionsheet.addClass('weui_actionsheet_toggle');
        mask.show().addClass('weui_fade_toggle').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('#actionsheet_cancel').click(function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
    }

    $('#list').not(".noplayimg").on('click', function () {
        showActionSheet();
    });
    $('img').not(".noplayimg").on('click', function (e) {
        showActionSheet();
    });
    $('.play_pyq').on('click', function () {
        var scene = $(this).data("scene");
        gotoplay(scene);
    });
</script>

<div id="myModal" class="modal fade myModal">
    <div class="modal-dialog">
        <div class="modal-content">
        <div id="box" class="container">
            <!--留言-->
            <div class="takeComment">
                <form id="submitForm" method="post">
                    <input type="hidden" name="friend.id">
                    <input type="hidden" name="parent.id">

                    <textarea name="content" rows="6" class="takeTextField form-control" placeholder="在这里输入你想说的话吧" id="tijiaoText" v-model="txtval"></textarea>
                    <div class="takeSbmComment clearfix">
                        <button type="button" class="inputs btn btn-success btn-sm" value=""  data-dismiss="modal">关闭</button>
                        &nbsp;&nbsp;
                        <button type="button" class="inputs btn btn-success btn-sm btn-submit" value="" >提交评论</button>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

</body>
</html>